<!--
 * @Author: zhang_wenjuan
 * @Date: 2021-05-17 14:27:59
 * @LastEditTime: 2021-08-02 10:42:57
 * @Description: 蓄电池抄录
-->
<template>
    <div id="battery_page" class="copyPage">
        <!-- 顶部导航 -->
        <van-nav-bar title="蓄电池抄录" left-arrow @click-left="back" fixed>
            <van-icon class="rotate-icon" name="ellipsis" slot="right" size="20" @click="showMore=true" />
            <template slot="right">
                <div class="parent-circle">
                    <div class="child-circle"></div>
                </div>
            </template>
        </van-nav-bar>
        <!-- 更多按钮弹窗 -->
        <div class="popupPage" v-if="showMore">
            <div class="mask" @click="showMore=false">
                <div class="popup">
                    <van-cell @click="itemClick(item.name)" v-for="(item,i) of moreButtons" :key="i"
                        :value="item.name" />
                </div>
            </div>
        </div>
        <!-- 折叠面板 -->
        <van-collapse v-model="activeNames">
            <div style="display: flex;padding-left: 4px; margin-top: 3.5rem;">
                <span class="line_green"></span>
                <span>蓄电池</span>
            </div>
            <van-collapse-item v-for="(item,i) in copyDataArr" :key="i" :title="item.name" :name="i">
                <div slot="title" style="display: flex;">
                    <!-- <span class="line_green"></span> -->
                    <span>{{item.name}}</span>
                </div>
                <div>
                    <div v-for="(itemSon,index) in item.childConfig" :key="index">
                        <div v-if="itemSon.copyName!='电阻'&&itemSon.copyName!='电压'" class="line-title font14">
                            {{itemSon.copyName}}</div>
                        <div v-if="itemSon.copyName!='电阻'&&itemSon.copyName!='电压'">
                            <div class="line">
                                <van-field v-model="itemSon.copyValue" label="查看历史" input-align="right"
                                    placeholder="请输入" @blur="rulesCon(itemSon)">
                                    <div slot="label" @click="showHistory(itemSon,item,i,index)">
                                        <span>查看历史</span>
                                    </div>
                                </van-field>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 电压电阻表格区域 -->
                <div class="tablePart">
                    <table>
                        <tr>
                            <th style="width:40px;">序号</th>
                            <th>电压(V)</th>
                            <th>电阻(mΩ)</th>
                            <th></th>
                        </tr>
                        <tr v-for="(row,ii) of item.dz" :key="ii">
                            <!-- 序号 -->
                            <td>{{ii+1}}</td>
                            <!-- 电压 -->
                            <td>
                                <van-field type="number" @blur="rulesdy(row)" input-align="center" v-model="row.dy" />
                            </td>
                            <!-- 电阻 -->
                            <td>
                                <van-field type="number" @blur="rulesdz(row)" input-align="center" v-model="row.dz" />
                            </td>
                            <!-- 查看历史 -->
                            <td class="historyText" @click="showTableHistory(item,row,i,ii)">
                                <span>查看历史</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </van-collapse-item>
        </van-collapse>
        <!-- 底部按钮区域 -->
        <div class="footPart">
            <van-button size="small" @click="back">取消</van-button>
            <van-button class="sureBtn" size="small" @click="sumbit">提交</van-button>
        </div>
        <!-- 电磁节数抄录下拉弹窗 -->
        <van-popup v-model="show" style="height:320px;" position="bottom">
            <div class="selectUser">
                <van-nav-bar title="查看历史" @click-left="show=false" fixed>
                </van-nav-bar>
                <div class="listPart">
                    <div class="historyBox">
                        <div class="trBox">
                            <span style="flex: 2.5 1 0%;
                                text-align: center;">时间</span>
                            <span style="flex:2;text-align: center;">电压</span>
                            <span style="flex:2;text-align: center;">电阻</span>
                            <span style="flex:0.9;text-align: center;"></span>
                        </div>
                        <van-radio-group v-model="radio">
                            <van-cell-group>
                                <van-cell class="trBox" v-for="(item,index) in dyDzHistoryData" :key="index"
                                    @click="radio = index">
                                    <div class="trBox">
                                        <span style="flex: 2.5 1 0%;
                                text-align: center;">{{item.date|filterDate}}</span>
                                        <span style="flex:2;text-align: center;">{{item.dy|filterText}}</span>
                                        <span style="flex:2;text-align: center;">{{item.dz|filterText}}</span>
                                        <span style="flex:0.9;text-align: center;">
                                            <van-radio :name="index" /></span>
                                    </div>
                                </van-cell>
                            </van-cell-group>
                        </van-radio-group>
                    </div>
                    <div class="btnBox">
                        <div class="flex">
                            <div class="noPass" @click="cancel">取消</div>
                            <div class="pass" @click="dzDyHistorySure">确定</div>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
        <!-- 普通数抄录下拉弹窗 -->
        <van-popup v-model="show1" style="height:320px;" position="bottom">
            <div class="selectUser">
                <van-nav-bar title="查看历史" @click-left="show=false" fixed>
                    <!-- <template slot="left">
                        <div class="">
                            <div class="header_fs" >取消</div>
                        </div>
                    </template>
                    <template slot="right">
                        <div class="">
                            <div class="header_fs" >确定</div>
                        </div>
                    </template> -->
                </van-nav-bar>
                <div class="listPart">
                    <div class="historyBox">
                        <div class="trBox">
                            <span class="historyDate">时间</span>
                            <span class="copyName">{{copyName}}</span>
                            <span> </span>
                        </div>
                        <van-radio-group v-model="radio">
                            <van-cell-group>
                                <van-cell class="trBox" clickable v-for="(item,i) in historyData" :key="i"
                                    @click="radio = i">
                                    <div class="trBox">
                                        <span>{{item.createTime|filterDate}}</span>
                                        <span>{{item.copyValue}}</span>
                                        <van-radio :name="i" />
                                    </div>

                                </van-cell>
                            </van-cell-group>
                        </van-radio-group>
                    </div>
                    <div class="btnBox">
                        <div class="flex">
                            <div class="noPass" @click="cancel">取消</div>
                            <div class="pass" @click="historySure">确定</div>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
        <!-- 目录下拉弹窗 -->
        <van-popup v-model="menu" :style="{ height: '30%' }" position="bottom">
            <div class="selectUser">
                <van-nav-bar title="目录" fixed>
                </van-nav-bar>
                <div class="listPart">
                    <div class="meunBox">
                        <div class="trMeunBox" v-for="(item,i) in copyDataArr" :key="i">
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>

    </div>
</template>
<script type="text/javascript">

    import Utils from '@/utils/util'
    import { submitCopyData, getChildConfigList, getDeviceByType, getHistoryIInfo, getCopyValue, addCopyRecord, getCopyConfigList } from '../../api/dataCopy';
    export default {
        name: "batteryCopy",
        components: {

        },
        data() {
            return {
                menu: false,
                copyConfigId: "",// 抄录项id
                deviceTypeName: "",// 设备类型名称
                deviceTypeId: "",// 设备类型id
                substationId: "",// 变电站id
                substationName: "",// 变电站名称
                copyDataArr: [],// 抄录数据
                historyData: [],// 历史数据
                dyDzHistoryData: [],// 电压电阻历史数据
                // dzHistoryData: [],// 电阻历史数据
                itemIndex: null,// 设备索引
                itemSonIndex: null,// 抄录项索引
                tableIndex: null,// 抄录项索引
                // 是否显示历史数据弹窗
                show: false,
                show1: false,
                text: "",
                radio: 0,
                radioCopy: null,
                historyCopyCode: "",
                copyName: "",
                dyHistoryIInfo: [],// 电压历史数据
                dzHistoryIInfo: [],// 电阻历史数据
                // 激活的折叠面板选项
                activeNames: ['1'],
                //是否展示更多按钮
                showMore: false,
                userInfo: JSON.parse(localStorage.getItem('userInfo')),
                // 抄录类型
                moreButtons: [
                    { name: "同步数据" },
                    { name: "目录" },
                    { name: "二维码" },
                    { name: "RFID" },
                ],
                // 节数抄录
                arr: [
                    { dy: "", dz: "", },
                    { dy: "", dz: "", },
                    { dy: "", dz: "", },
                    { dy: "", dz: "", },
                ],
                // 提交的数据
                submitCopyData: [],
            }
        },
        created() {
            this.deviceTypeName = this.$route.params.deviceTypeName
            this.deviceTypeId = this.$route.params.deviceTypeId
            this.substationId = this.$route.params.substationId
            this.copyConfigId = this.$route.params.copyConfigId
            this.substationName = this.$route.params.substationName
            this.getDeviceByType()

        },
        mounted() {

        },
        methods: {
            /**
             * 返回
             */
            back() {
                this.$router.push({
                    name: "copyMenu"
                })
            },
            /**
             * @description: 更多
             * @param {*}
             * @return {*}
             */
            itemClick(name) {
                if (name == "目录") {
                    this.menu = true
                } else {
                    this.getDeviceByType()
                }
            },
            /**
             * @description: 查看历史取消
             * @param {*}
             * @return {*}
             */
            cancel() {
                this.show = false
                this.show1 = false
                this.radio = this.radioCopy
            },
            /**
             * 提交
             */
            sumbit() {
                var self = this
                // 抽离电压电阻
                var deviceDataList = []
                for (let i = 0; i < self.copyDataArr.length; i++) {
                    var dzValue = [] //电压
                    var dyValue = [] // 内阻
                    // 获取电压和电阻值
                    for (let o = 0; o < self.copyDataArr[i].dz.length; o++) {
                        dzValue.push(self.copyDataArr[i].dz[o].dz)
                        dyValue.push(self.copyDataArr[i].dz[o].dy)
                    }
                    // 拼接抄录值
                    self.copyDataArr[i].childConfig[self.copyDataArr[i].childConfig.length - 1].copyValue = dyValue.join(",")
                    self.copyDataArr[i].childConfig[self.copyDataArr[i].childConfig.length - 2].copyValue = dzValue.join(",")
                    for (let j = 0; j < self.copyDataArr[i].childConfig.length; j++) {
                        self.copyDataArr[i].childConfig[j].deviceId = self.copyDataArr[i].code
                        self.copyDataArr[i].childConfig[j].deviceName = self.copyDataArr[i].name
                        deviceDataList.push(self.copyDataArr[i].childConfig[j])
                    }


                }
                let params = {
                    "copyPerson": self.userInfo.userName,
                    "copyPersonId": self.userInfo.userId,
                    "copyTime": new Date(),
                    "deviceDataList": deviceDataList,
                    "deviceType": self.deviceTypeId,
                    "deviceTypeName": self.deviceTypeName,
                    "roleCode": "",
                    "substationId": self.substationId,
                    "substationName": self.substationName,
                    "userId": self.userInfo.userId
                }
                self.$toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "新增抄录中...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
                addCopyRecord(params).then(res => {
                    if (res.success) {
                        self.$Toast.success("抄录成功")
                        self.$router.go(-1)
                    } else {
                        self.$Toast("抄录失败")
                    }
                    self.$Toast.clear();
                }).catch(err => {
                    self.$Toast("抄录失败")
                    self.$Toast.clear();
                })
            },

            /**
             * 查看表格历史数据
             */
            showTableHistory(item, row, index, i) {
                // 如果点击的不是通一条抄录项
                if (this.historyCopyCode != row.dycode) {
                    this.radio = 0
                    this.historyCopyCode = row.dycode
                }
                this.itemIndex = null// 设备索引
                this.itemSonIndex = null// 抄录项索引
                this.tableIndex = null// 抄录项索引
                var self = this
                self.dyDzHistoryData = []// 电压历史数据清空
                // 获取电压历史数据
                var params = {
                    "copyCode": row.dycode,
                    "roleCode": "",
                    "deviceId": item.code,
                    "userId": this.userInfo.userId
                }
                // 获取电压历史数据
                getHistoryIInfo(params).then(res => {
                    if (res.success) {
                        if (res.data.length > 0) {
                            self.dyHistoryIInfo = res.data
                            // 获取电阻历史数据
                            var params = {
                                "copyCode": row.dzcode,
                                "roleCode": "",
                                "deviceId": item.code,
                                "userId": this.userInfo.userId
                            }
                            // 获取电阻历史数据
                            getHistoryIInfo(params).then(res => {
                                if (res.success) {
                                    if (res.data.length > 0) {
                                        self.dzHistoryIInfo = res.data
                                        self.itemIndex = index
                                        self.tableIndex = i
                                        // 处理历史数据
                                        var obj = {}
                                        for (let j = 0; j < self.dzHistoryIInfo.length; j++) {
                                            self.dyDzHistoryData.push({
                                                date: self.dzHistoryIInfo[j].createTime,
                                                dz: self.dzHistoryIInfo[j].copyValue.split(",")[i],// 获取当前点击的历史数据
                                                dy: self.dyHistoryIInfo[j].copyValue.split(",")[i],// 获取当前点击的历史数据
                                            })
                                        }
                                        console.log(self.dyDzHistoryData);
                                    } else {
                                        self.$Toast('没有历史数据')
                                    }
                                } else {
                                    self.$Toast('查看历史失败')
                                }
                            }).catch(err => {
                                self.$Toast('查看历史失败')
                            })
                        } else {
                            self.$Toast('没有历史数据')
                        }
                    } else {
                        self.$Toast('查看历史失败')
                    }
                }).catch(err => {
                    self.$Toast('查看历史失败')
                })
                this.show = true
            },

            // 获取间隔树
            getDeviceByType() {
                var self = this
                self.copyDataArr = []
                // 请求参数
                var params = {
                    "deviceType": this.deviceTypeId,
                    "roleCode": "",
                    "pageNum": 1,
                    "pageSize": 1,
                    "substationId": this.substationId,
                    "userId": this.userInfo.userId
                }
                getDeviceByType(params).then(res => {
                    // 蓄电池组
                    var arr = res.data
                    for (let i = 0; i < arr.length; i++) {
                        for (let j = 0; j < arr[i].deviceList.length; j++) {
                            arr[i].deviceList[j].childConfig = []
                            self.copyDataArr.push(arr[i].deviceList[j])
                        }
                    }
                    var paramsSon = {
                        "copyItemConfigId": self.copyConfigId,
                        "pageNum": 1,
                        "pageSize": 10000,
                        "roleCode": "",
                        "userId": self.userInfo.userId
                    }
                    // 获取子项
                    getChildConfigList(paramsSon).then(resSon => {
                        for (let k = 0; k < self.copyDataArr.length; k++) {
                            self.copyDataArr[k].childConfig = JSON.parse(JSON.stringify(resSon.data))
                        }
                        var getValue = {}
                        //获取上一次的抄录值
                        for (let a = 0; a < self.copyDataArr.length; a++) {
                            for (let l = 0; l < self.copyDataArr[a].childConfig.length; l++) {
                                // 获取每一个抄录项的历史数据
                                getCopyValue({
                                    "copyCode": self.copyDataArr[a].childConfig[l].copyCode,
                                    "deviceId": self.copyDataArr[a].code,
                                    "roleCode": "",
                                    "userId": self.userInfo.userId
                                }).then(getV => {
                                    self.copyDataArr[a].childConfig[l].copyValue = getV.data.copyValue
                                    if (getV.data.copyName == '电阻') {
                                        self.copyDataArr[a].dzarr = getV.data.copyValue.split(",")
                                        self.copyDataArr[a].dzcode = getV.data.copyCode
                                    }
                                    if (getV.data.copyName == '电压') {
                                        self.copyDataArr[a].dyarr = getV.data.copyValue.split(",")
                                        self.copyDataArr[a].dycode = getV.data.copyCode
                                    }
                                })
                            }
                        }
                        setTimeout(() => {
                            // 组装节数上一次抄录数据
                            for (let v = 0; v < self.copyDataArr.length; v++) {
                                var dz = []
                                // 判断电电阻是否有历史值
                                if (!Utils.baseUtil.isEmptyString(self.copyDataArr[v].dzarr)) {
                                    if (self.copyDataArr[v].dzarr.length > 0) {
                                        for (let vv = 0; vv < self.copyDataArr[v].dzarr.length; vv++) {
                                            dz.push({ dz: self.copyDataArr[v].dzarr[vv], dy: self.copyDataArr[v].dyarr[vv], dycode: self.copyDataArr[v].dycode, dzcode: self.copyDataArr[v].dzcode })
                                        }
                                        self.$set(self.copyDataArr[v], "dz", dz)
                                    } else {
                                        // 如果没有使用默认四条   因为台账数据没有电池节数
                                        self.$set(self.copyDataArr[v], "dz", self.arr)
                                    }
                                } else {
                                    // 如果没有使用默认四条   因为台账数据没有电池节数
                                    self.$set(self.copyDataArr[v], "dz", self.arr)
                                }
                            }
                        }, 500);
                    })
                }).catch(err => {
                    self.$Toast("请求失败!")
                })
            },

            /**
             * @description: 抄录项查看历史
             * @param {*} val
             * @return {*}
             */
            showHistory(val, item, i, j) {
                // 判断是否跟上一次点击的抄录项相同
                if (this.historyCopyCode != val.copyCode) {
                    this.radio = 0
                    this.historyCopyCode = val.copyCode
                }
                this.tableIndex = null// 抄录项索引
                this.itemIndex = i
                this.itemSonIndex = j
                this.historyData = []
                this.copyName = val.copyName
                var self = this
                var params = {
                    "copyCode": val.copyCode,
                    "roleCode": "",
                    "deviceId": item.code,
                    "userId": this.userInfo.userId
                }
                // 获取历史数据
                getHistoryIInfo(params).then(res => {
                    if (res.success) {
                        if (res.data.length > 0) {
                            var HistoryIInfo = res.data
                            for (let i = 0; i < HistoryIInfo.length; i++) {
                                // 判断当前点击的抄录项的值值是否为空
                                if (!Utils.baseUtil.isEmptyString(HistoryIInfo[i].copyValue)) {
                                    self.historyData.push(HistoryIInfo[i])
                                }
                            }
                            if (self.historyData.length > 0) {
                                // 如果上一次没有选中 默认使用第一条历史数据
                                if (Utils.baseUtil.isEmptyString(self.radio)) {
                                    self.radio = 0;
                                }
                                self.show1 = true
                            } else {
                                self.$Toast('没有历史数据')
                            }
                        } else {
                            self.$Toast('没有历史数据')
                        }
                    } else {
                        self.$Toast('查看历史失败')
                    }
                }).catch(err => {
                    self.$Toast('查看历史失败')
                })

            },

            /**
             * @description: 普通抄录项查看历史确认
             * @param {*}
             * @return {*}
             */
            historySure() {
                // 赋值权重的值
                this.copyDataArr[this.itemIndex].childConfig[this.itemSonIndex].copyValue = this.historyData[this.radio].copyValue
                this.show1 = false// 窗口关闭
                this.radioCopy = this.radio// 选中标识记录
            },

            /**
             * @description: 蓄电池选择历史数据确认
             * @param {*}
             * @return {*}
             */
            dzDyHistorySure() {
                // 选中的值赋值
                this.copyDataArr[this.itemIndex].dz[this.tableIndex].dy = this.dyDzHistoryData[this.radio].dy
                this.copyDataArr[this.itemIndex].dz[this.tableIndex].dz = this.dyDzHistoryData[this.radio].dz
                this.show = false// 窗口关闭
                this.itemIndex = null// 设备索引
                this.itemSonIndex = null// 抄录项索引
                this.tableIndex = null// 抄录项索引
                this.radioCopy = this.radio// 选中标识记录
            },

            /**
            * @description: 输入校验
            * @param {*}
            * @return {*}
            */
            rulesCon(itemSon) {
                console.log(itemSon);
                // 如果不为空
                if (!Utils.baseUtil.isEmptyString(itemSon.copyValue)) {
                    // 如果为空  就不需要限制输入类型
                    if (!Utils.baseUtil.isEmptyString(itemSon.copyRangeMaxmum)) {
                        // 判断是否是数字且不为nan
                        if (typeof Number(itemSon.copyRangeMaxmum) == "number" && !isNaN(Number(itemSon.copyRangeMaxmum))) {
                            //最大值验证 
                            if (typeof Number(itemSon.copyValue) == "number" && !isNaN(Number(itemSon.copyValue))) {
                                // 转换输入值为数字
                                if (Number(itemSon.copyValue) > Number(itemSon.copyRangeMaxmum)) {
                                    this.$Toast('最大值为：' + itemSon.copyRangeMaxmum)
                                    itemSon.copyValue = itemSon.copyRangeMaxmum// 默认恢复最大值
                                }
                            }
                        }
                    }
                    if (!Utils.baseUtil.isEmptyString(itemSon.copyRangeMinimum)) {
                        // 判断是否是数字且不为nan
                        if (typeof Number(itemSon.copyRangeMinimum) == "number" && !isNaN(Number(itemSon.copyRangeMinimum))) {
                            //最小值验证 
                            if (typeof Number(itemSon.copyValue) == "number" && !isNaN(Number(itemSon.copyValue))) {
                                // 转换输入值为数字
                                if (Number(itemSon.copyValue) < Number(itemSon.copyRangeMinimum)) {
                                    this.$Toast('最小值为:' + itemSon.copyRangeMinimum)
                                    itemSon.copyValue = itemSon.copyRangeMinimum// 默认恢复最小值
                                }
                            }
                        }
                    }
                }
            },

            // 由于台账数据没有电池节数  所有先写死
            /**
            * @description: 电压验证
            * @param {*} son
            * @return {*}
            */
            rulesdy(son) {
                if (!Utils.baseUtil.isEmptyString(son.dy)) {
                    if (son.dy > 100 && typeof son.dy != 'number') {
                        this.$Toast("最大值为100")
                        son.dy = 100
                    }
                    if (son.dy < 1 && typeof son.dy != 'number') {
                        this.$Toast("最小值为1")
                        son.dy = 1
                    }
                }
            },
            /**
             * @description: 电阻验证
             * @param {*} son
             * @return {*}
             */
            rulesdz(son) {
                if (!Utils.baseUtil.isEmptyString(son.dz)) {
                    if (son.dz > 100 && typeof son.dz != 'number') {
                        if (son.dz > 100 && typeof son.dz != 'number') {
                            this.$Toast("最大值为100")
                            son.dz = 100
                        }
                    }
                    if (son.dz < 1 && typeof son.dz != 'number') {
                        this.$Toast("最小值为1")
                        son.dz = 1
                    }
                }
            },
        },
        filters: {
            // 时间格式化
            filterDate(val) {
                return Utils.DateUtil.getFormatDateByLong(val, 'yyyy-MM-dd hh:mm')
            },
            // 抄录值格式化
            filterText(val) {
                if (Utils.baseUtil.isEmptyString(val)) {
                    return "无"
                } else {
                    return val
                }
            }
        }
    }
</script>
<style scoped>
    #battery_page {
        width: 100%;
        height: 100%;
        padding-bottom: 0;
        background: #fff;
        /* margin-top: 46px; */
        overflow-y: auto;
    }

    .van-nav-bar {
        background: #17b49b;
    }

    .van-nav-bar /deep/ .van-icon {
        color: #fff;
        font-size: 22px;
    }

    .van-nav-bar /deep/ .van-nav-bar__text {
        color: #fff;
        font-size: 18px;
    }

    .van-nav-bar /deep/ .van-button {
        background: #fff;
        color: #17b49b;
        width: 60px;
        border-radius: 4px;
        margin-right: 10px;
    }

    .popup {
        position: absolute;
        top: 60px;
        right: 10px;
        width: 150px;
        height: 84px;
    }

    .popup .van-cell {
        background: #17b49b;
    }

    .popup .van-cell__value--alone {
        color: #fff;
    }

    /* 更多弹窗按钮样式 */
    .popupPage {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        height: 100%;
        text-align: left;
    }

    .mask {
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.4);
    }

    /* 折叠面板区域 */
    #battery_page /deep/ .van-field__label {
        width: 130px;
    }

    .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .line .unit {
        width: 20px;
    }

    .van-collapse /deep/ .van-button--plain.van-button--info {
        color: #17b49b;
    }

    .van-button--info {
        border: 1px solid #17b49b;
    }

    /* 表格区域 */
    .tablePart {
        margin-top: 20px;
    }

    .tablePart table {
        width: 100%;
        border-top: 1px solid #efefef;
        border-left: 1px solid #efefef;
        /* 去掉单元格间隙 */
        border-spacing: 0;
    }

    .tablePart table th {
        height: 30px;
        line-height: 30px;
        padding: 0;
        box-sizing: border-box;
        /* background: #17b49b;
    color: #fff; */
        border-bottom: 1px solid #efefef;
        border-right: 1px solid #efefef;
    }

    .tablePart table td {
        height: 40px;
        text-align: center;
        box-sizing: border-box;
        border-bottom: 1px solid #efefef;
        border-right: 1px solid #efefef;
    }

    .tablePart table /deep/ .van-cell {
        /* 解决带input输入框的td不显示边框问题 */
        width: 99%;
        height: 40px;
    }

    .historyText span {
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 25px;
        background: #1481EE;
        color: white;
        border-radius: 3px;
    }

    /* 查看历史弹窗 */
    /* 查看历史弹窗 */
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background: #F5F6FA !important;
    }

    .block {
        width: 100%;
        height: 120px;
        padding: 20px;
        border-radius: 5px;
    }

    .historyItem {
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ECECEC;
    }

    /* 底部按钮区域 */
    .footPart {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top: 1px solid #efefef;
        background: #fff;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footPart .van-button {
        width: 100px;
        margin: 0 10px;
        border-radius: 5px;
    }

    .sureBtn {
        background: #17b49b;
        color: #fff;
    }

    .van-nav-bar--fixed {
        position: unset;
    }

    .historyBox {
        width: 100%;
        /* max-height: 217px; */
        height: 20.6rem;
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 3rem;
    }

    .meunBox {
        width: 100%;
        /* max-height: 217px; */
        height: 12.6rem;
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 3rem;
    }

    .trBox {
        width: 95%;
        margin: 0 auto;
        height: 3rem;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .trMeunBox {
        width: 100%;
        margin: 0 auto;
        height: 3rem;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #ccc;
    }

    .copyName {
        display: inline-block;
        width: 40%;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .historyDate {
        display: inline-block;
        width: 20%;
        text-align: center;
    }

    .btnBox {
        position: absolute;
        left: 0;
        bottom: 0;
        margin-bottom: 1rem;
        width: 100vw;
    }

    .flex {
        width: 40%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .flex>div {
        width: 6rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        border-radius: 8px;
    }

    .noPass {
        background-color: #fff;
        text-align: center;
        color: #000;
        margin-right: 0.5rem;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(51, 51, 51, 1);
    }

    .pass {
        color: #fff;
        margin-left: 0.5rem;
        background: inherit;
        background-color: rgb(24, 181, 156);
        border: none;
    }

    [class*=van-hairline]::after {
        border: none;
    }
</style>